<template>
  <header class="top">
    <span class="goback" @click="goBack"></span> <span class="gohome" @click="goHome"></span>
  </header>
</template>

<script>
  export default {

    name: 'topbar',
    props: ['text'],

    methods: {
      goBack () {
        this.$router.goBack()
      },
      goHome(){
        this.$router.push('/home')
      },
    }


  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .top{
    height:2.5rem;
    position:fixed;
    width:100%;
    top:0;
    left:0;
    z-index:98;
  }
  .goback{
    position:absolute;
    left:.75rem;
    top:.75rem;
    width:1.2rem;
    height:1.2rem;
    background: url(back-icon.svg) 0 0 no-repeat;
    background-size:100%;
  }
  .gohome{
    position:absolute;
    right:.75rem;
    top:.75rem;
    width:1.2rem;
    height:1.2rem;
    background: url(backhome-icon.svg) 0 0 no-repeat;
    background-size:100%;
  }
</style>
